<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TTS语音合成助手</title>
    <link rel="stylesheet" href="/static/css/style.css">
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>🎤 TTS语音合成助手</h1>
            <div class="status-bar">
                <div class="status-indicator" id="connectionStatus">
                    <span class="status-dot" id="statusDot"></span>
                    <span id="statusText">未连接</span>
                </div>
            </div>
        </header>

        <main class="main-content">
            <div class="tts-container">
                <div class="input-section">
                    <div class="section-title">
                        <h3>📝 文本输入</h3>
                        <div class="char-count" id="charCount">0/5000</div>
                    </div>
                    <textarea 
                        id="textInput" 
                        placeholder="请输入要合成语音的文本..." 
                        rows="6"
                        maxlength="5000"
                    ></textarea>
                    
                    <div class="controls-section">
                        <div class="control-group">
                            <label for="voiceSelect">音色选择:</label>
                            <select id="voiceSelect">
                            </select>
                        </div>
                        
                        <div class="control-group">
                            <label for="speedSlider">语速:</label>
                            <input type="range" id="speedSlider" min="0.2" max="3.0" step="0.1" value="1.0">
                            <span id="speedValue">1.0x</span>
                        </div>
                        
                        <div class="control-group">
                            <label for="volumeSlider">音量:</label>
                            <input type="range" id="volumeSlider" min="0.1" max="3.0" step="0.1" value="1.0">
                            <span id="volumeValue">1.0x</span>
                        </div>
                        
                        <div class="control-group">
                            <label for="formatSelect">音频格式:</label>
                            <select id="formatSelect">
                                <option value="mp3">MP3</option>
                                <option value="wav">WAV</option>
                                <option value="flac">FLAC</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="action-buttons">
                        <button class="btn btn-primary" id="synthesizeBtn" onclick="synthesizeText()">
                            <span class="btn-icon">🎵</span>
                            生成语音
                        </button>
                        <button class="btn btn-secondary" id="clearBtn" onclick="clearInput()">
                            <span class="btn-icon">🗑️</span>
                            清空文本
                        </button>
                    </div>
                </div>

                <div class="output-section">
                    <div class="section-title">
                        <h3>🔊 音频输出</h3>
                        <div class="audio-info" id="audioInfo">等待生成...</div>
                    </div>
                    
                    <div class="audio-player" id="audioPlayerContainer" style="display: none;">
                        <audio id="audioElement" controls></audio>
                    </div>
                    
                    <div class="audio-controls" id="audioControls" style="display: none;">
                        <button class="btn btn-success" onclick="playAudio()">
                            <span class="btn-icon">▶️</span>
                            播放
                        </button>
                        <button class="btn btn-warning" onclick="pauseAudio()">
                            <span class="btn-icon">⏸️</span>
                            暂停
                        </button>
                        <button class="btn btn-info" onclick="downloadAudio()">
                            <span class="btn-icon">⬇️</span>
                            下载
                        </button>
                    </div>
                </div>
            </div>

            <aside class="sidebar">
                <div class="sidebar-section">
                    <h3>💡 演示文本</h3>
                    <div class="demo-texts">
                        <button class="demo-btn" onclick="loadDemoText('欢迎使用TTS语音合成服务，这里是将文字转换为语音的智能助手。')">
                            🌟 欢迎语
                        </button>
                        <button class="demo-btn" onclick="loadDemoText('人工智能正在改变我们的生活，让未来充满无限可能。')">
                            🚀 科技前沿
                        </button>
                        <button class="demo-btn" onclick="loadDemoText('春天的花朵绽放，夏天的阳光明媚，秋天的果实累累，冬天的雪花纷飞。四季更迭，自然美丽。')">
                            🌸 优美散文
                        </button>
                        <button class="demo-btn" onclick="loadDemoText('Hello, this is a test for text-to-speech synthesis in English.')">
                            🌍 英文测试
                        </button>
                        <button class="demo-btn" onclick="loadDemoText('こんにちは、これは日本語の音声合成テストです。今日はいい天気ですね。')">
                            🇯🇵 日语问候
                        </button>
                        <button class="demo-btn" onclick="loadDemoText('桜の花が咲いて、とても美しいです。春の季節が大好きです。')">
                            🌸 日语散文
                        </button>
                        <button class="demo-btn" onclick="loadDemoText('数字测试：1, 2, 3, 4, 5。数学公式：a² + b² = c²。')">
                            🔢 数字公式
                        </button>
                        <button class="demo-btn" onclick="loadDemoText('今天天气真好，阳光明媚，适合出去散步。')">
                            😊 日常对话
                        </button>
                        <button class="demo-btn" onclick="loadDemoText('尊敬的用户，您的订单已成功提交，预计将在三个工作日内送达。')">
                            📦 通知消息
                        </button>
                    </div>
                </div>

                <div class="sidebar-section">
                    <h3>🔧 系统信息</h3>
                    <div class="system-info" id="systemInfo">
                        <div class="info-item">
                            <span class="info-label">连接状态:</span>
                            <span class="info-value" id="connectionInfo">未连接</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">音频处理:</span>
                            <span class="info-value" id="audioProcessingInfo">检测中...</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">支持的格式:</span>
                            <span class="info-value">MP3, WAV, FLAC</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">最大文本长度:</span>
                            <span class="info-value">5000字符</span>
                        </div>
                    </div>
                </div>

                <div class="sidebar-section">
                    <h3>📊 使用统计</h3>
                    <div class="usage-stats" id="usageStats">
                        <div class="stat-item">
                            <span class="stat-label">合成次数:</span>
                            <span class="stat-value" id="synthesizeCount">0</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-label">总字符数:</span>
                            <span class="stat-value" id="totalChars">0</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-label">平均时长:</span>
                            <span class="stat-value" id="avgDuration">0秒</span>
                        </div>
                    </div>
                </div>

                <div class="sidebar-section">
                    <div class="section-header">
                        <h3>📋 最近合成</h3>
                        <button class="btn btn-small btn-clear" onclick="clearHistory()" title="清除所有历史记录">
                            <span class="btn-icon">🗑️</span>
                            清除
                        </button>
                    </div>
                    <div class="history-list" id="historyList">
                        <div class="empty-history">暂无合成记录</div>
                    </div>
                </div>
            </aside>
        </main>
    </div>

    <!-- 加载提示 -->
    <div id="loadingOverlay" class="loading-overlay" style="display: none;">
        <div class="loading-spinner"></div>
        <div class="loading-text">正在合成语音...</div>
        <div class="loading-progress" id="loadingProgress">0%</div>
    </div>

    <!-- 通知消息 -->
    <div id="notification" class="notification" style="display: none;">
        <span id="notificationText"></span>
        <button onclick="hideNotification()" class="notification-close">×</button>
    </div>

    <script src="/static/js/app.js"></script>
</body>
</html>